<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1> {{user.name}} -- {{user.age}} </h1>
        <button @click="changeUser">修改用户</button>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                user: {
                    name: '张三',
                    age: 18
                }
            }
        },
        methods: {
            changeUser() {
                // watch 默认是浅层的：被侦听的属性，仅在被赋新值时，才会触发回调函数——而嵌套属性的变化不会触发
                // this.user.name = '李四'


                this.user.name = '李四'
            }
        },
        watch: {
            // user(current, user) {
            //     console.log(current, user);
            // }

            // 要监听谁就写谁的名称
            user: {
                // 会在发生改变的时候执行
                handler(newValue, oldValue) {
                    console.log(newValue, oldValue);
                    console.log(document.querySelector('h1').innerText);
                },
                // deep 用来配置深度监听，可以监听到更深层的属性改变
                deep: true,
                // 强制立即执行回调,配置非惰性
                // immediate: true,
                // 配置侦听器只执行一次
                // once: true,
                // 配置侦听器的调用时机，默认同步执行的，拿到的 DOM 元素是之前值
                // 可以配置 flush: 'post' 来获取更新之后的值
                flush: 'post'
            }

        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>
<!-- 

    计算属性：
        1. 运行会立即执行一次(非惰性)
        2. 一次可以监听多个值，多个值影响一个值
        3. 计算属性不支持异步
        4. 必须要有一个返回值
        5. 具有缓存

    侦听器：
        1. 不会立即执行一次
        2. 一次只能监听一个值，一个值影响多个值
        3. 支持异步
        4. 不需要返回值
        5. 不具有缓存
 -->